<template>
    <el-card>
        <template #header>
            修改密码
        </template>
        <el-alert title="修改密码后，您将需要重新登录" type="warning" show-icon style="margin-bottom: 5px"
                  :closable="false"/>
        <el-form :model="formData" class="password-form" :rules="rules" ref="resetPasswordForm" label-width="120px">
            <el-form-item label="旧密码" prop="oldPassword">
                <el-input v-model="formData.oldPassword" type="password"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="formData.newPassword" type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
                <el-input v-model="formData.confirmPassword" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="resetPassword">确认修改</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup>

import {getCurrentInstance, ref} from 'vue';
import {ElMessage} from 'element-plus';
import {Logout, UpdatePassword} from "@/api/login";
import {useApp} from "@/pinia/modules/app";
import router from "@/router";


const formData = ref({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
})
const {proxy: ctx} = getCurrentInstance() // 可以把ctx当成vue2中的this

const {refs} = getCurrentInstance(); // 获取当前组件实例的 refs 属性
const resetPasswordForm = ref('resetPasswordForm')


const resetPassword = async () => {
    resetPasswordForm.value.validate(async (valid) => {
        if (valid) {
            try {
                const {code} = await UpdatePassword(formData.value.oldPassword, formData.value.newPassword);
                if (code === 200) {
                    ElMessage.success('密码重置成功！请从新登录');
                    await logout();
                } else if (code === 203) {
                    ElMessage.error('旧密码错误');
                }
            } catch (error) {
                ElMessage.error('密码重置失败，请重试！');
            }
        } else return false;
    })
}

const checkOldPasswordMatch = (rule, value, callback) => {
    if (value === formData.value.oldPassword) {
        callback(new Error('新密码不能与旧密码相同'))
    } else {
        callback()
    }
}

const checkPasswordMatch = (rule, value, callback) => {
    if (value !== formData.value.newPassword) {
        callback(new Error('两次输入密码不一致'))
    } else {
        callback()
    }
}


const logout = async () => {
    const {code, data, message} = await Logout();
    if (code == 200) {
        // 清除token
        useApp().clearToken()
        await router.push('/login')
    } else {
        ctx.$message.error(message)
    }
}

const rules = {
    oldPassword: [
        {required: true, message: '请输入旧密码', trigger: 'blur'}
    ],
    newPassword: [
        {required: true, message: '请输入新密码', trigger: 'blur'},
        {min: 6, message: '新密码长度不能少于6位', trigger: 'blur'},
        {validator: checkOldPasswordMatch, trigger: 'blur'}
    ],
    confirmPassword: [
        {required: true, message: '请再次输入新密码', trigger: 'blur'},
        {validator: checkPasswordMatch, trigger: 'blur'}
    ]
}

</script>

<style scoped>
.password-form {
    width: 400px;
    margin: 0 auto;
}
</style>